<template>
  <div class="deductTaxTable">
    <div class="title">
      <h3>抵扣金详情</h3>
    </div>
    <el-descriptions v-if="row" :column="3" border>
      <el-descriptions-item label="用户ID">{{ row.userId }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ row.username }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ row.phone }}</el-descriptions-item>
      <el-descriptions-item v-if="summaryData" label="可用抵扣金">{{ summaryData.couldUseTotal }}</el-descriptions-item>
      <el-descriptions-item v-if="summaryData" label="累计发放抵扣金">{{ summaryData.cumulativeDisTotal }}</el-descriptions-item>
      <el-descriptions-item v-if="summaryData" label="累计消耗抵扣金">{{ summaryData.cumulativeUseTotal }}</el-descriptions-item>
    </el-descriptions>
    <div class="key-search">
      <el-form ref="form" :model="BindForm" label-width="80px" label-position="left">
        <el-form-item label="订单号:" prop="orderSn">
          <el-col :span="24">
            <el-input v-model="BindForm.orderSn" placeholder="请输入订单号" maxlength="30" class="cus-input" clearable />
          </el-col>
        </el-form-item>
        <el-form-item prop="ruleId" :label="BindForm.type == 0 ? '发放规则:' : '消耗规则:'">
          <el-col :span="24">
            <DeductRuleSelect ref="deductRuleSelect" v-model="BindForm.ruleId" />
          </el-col>
        </el-form-item>
        <el-form-item label="商品:" prop="goods">
          <el-col :span="24">
            <select-goods ref="selectGoods" v-model="BindForm.goods" />
          </el-col>
        </el-form-item>
        <el-form-item prop="storeId" label="门店:">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.storeId" field="id" />
          </el-col>
        </el-form-item>
        <el-form-item prop="time" label="查询时段:">
          <el-col :span="24">
            <el-date-picker
              v-model="BindForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button plain style="margin-left:10px" @click="setWeek">近一周</el-button>
            <el-button plain @click="setMonth">近一月</el-button>
            <el-button plain @click="setYear">近一年</el-button>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">筛选</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row style="margin-bottom: 30px;">
      <el-col>
        <el-radio-group v-model="BindForm.type" @change="changedType">
          <el-radio-button :label="0">发放抵扣金</el-radio-button>
          <el-radio-button :label="1">消耗抵扣金</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <div class="ele-table">
      <el-table :data="BindTable" border max-height="600" :empty-text="loading ? '数据加载中' : (isSearch ? '未找到相关的订单信息' : '暂无订单信息')">
        <el-table-column
          label="订单号"
          prop="orderSn"
          align="center"
          width="220"
          :resizable="false"
          fixed="left"
        />
        <el-table-column
          label="商品编号"
          prop="goodsId"
          align="center"
          width="130"
          :resizable="false"
        />
        <el-table-column label="商品主图" align="center" :resizable="false" width="80">
          <template slot-scope="scope">
            <TableColumnGoodsImage :src="scope.row.goodsImg" />
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="goodsName"
          align="center"
          :resizable="false"
          min-width="200"
        />
        <el-table-column label="消费金额" align="center" :resizable="false" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.money.toFixed(2) }}元</span>
          </template>
        </el-table-column>
        <el-table-column
          label="抵扣金规则名称"
          prop="deductName"
          align="center"
          min-width="200"
          :resizable="false"
        />
        <el-table-column
          label="抵扣金规则类型"
          prop="deductType"
          align="center"
          width="120"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.deductType == 0" type="primary" size="small">发放规则</el-tag>
            <el-tag v-else type="primary" size="small">消耗规则</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="BindForm.type == 0 ? '发放方式' : '消耗方式'"
          prop="deductMethod"
          align="center"
          width="160"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deductMethod == 0">百分比（{{ scope.row.deductValue }}%）</span>
            <span v-else>固定金额（{{ scope.row.deductValue }}元）</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="BindForm.type == 0 ? '发放抵扣金' : '消耗抵扣金'"
          prop="deductMoney"
          align="center"
          width="100"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.deductMoney.toFixed(2) }}元</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="BindForm.type == 0 ? '发放时间' : '消耗时间'"
          prop="deductTime"
          align="center"
          width="160"
          :resizable="false"
        />
        <el-table-column
          label="归属门店"
          prop="storeName"
          align="center"
          :resizable="false"
          min-width="200"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          fixed="right"
          width="90"
          :resizable="false"
        >
          <!-- TODO SLJ 下面需要跳转到订单详情，目前是随便跳的页面 -->
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'YWC',
                  query: { orderSn: scope.row.orderSn }
                })
              "
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <div />
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>

<script>
import StoreSelect from '../../../components/StoreSelect/index'
import SelectGoods from '../../../components/SelectGoods/index'
import { ruleUserStaticOrderList } from '@/api/market'
import DeductRuleSelect from '../../../components/DeductRuleSelect/index'
import TableColumnGoodsImage from '../../../components/TableColumnGoodsImage/index'
export default {
  name: 'DeductTaxTable',
  components: { TableColumnGoodsImage, DeductRuleSelect, SelectGoods, StoreSelect },
  data() {
    return {
      row: null,
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      summaryData: null,
      BindForm: {
        ruleId: null,
        type: 0,
        orderSn: null,
        goods: null,
        time: null,
        storeId: null
      },
      BindTable: []
    }
  },
  created() {
    const vm = this
    this.row = this.$dd(this.$route.query.p)
    vm.loadTableData()
  },
  methods: {
    changedType() {
      const vm = this
      vm.BindForm.ruleId = null
      vm.$refs.deductRuleSelect.refresh(vm.BindForm.type)
      vm.reloadTableData()
    },
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    setWeek() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setMonth() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setYear() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 364)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.reloadTableData()
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.loadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.ruleId && vm.BindForm.ruleId > 0) {
        data['id'] = vm.BindForm.ruleId
        vm.isSearch = true
      }

      if (vm.BindForm.orderSn && vm.BindForm.orderSn.length > 0) {
        data['orderSn'] = vm.BindForm.orderSn
        vm.isSearch = true
      }

      data['userId'] = vm.row.userId
      data['type'] = parseInt(vm.BindForm.type)

      if (vm.BindForm.storeId && vm.BindForm.storeId > 0) {
        data['storeId'] = parseInt(vm.BindForm.storeId)
        vm.isSearch = true
      }

      if (vm.BindForm.goods) {
        data['goodsId'] = parseInt(vm.BindForm.goods.goodsId)
        vm.isSearch = true
      }

      if (vm.BindForm.time && vm.BindForm.time.length === 2) {
        data['startTime'] = vm.BindForm.time[0]
        data['endTime'] = vm.BindForm.time[1]
        vm.isSearch = true
      }

      vm.loading = true
      ruleUserStaticOrderList(data).then(res => {
        vm.loading = false
        vm.total = res.data.data.total
        if (res.data.data.couldUseTotal !== undefined && res.data.data.cumulativeDisTotal !== undefined && res.data.data.cumulativeUseTotal !== undefined) {
          vm.summaryData = {
            couldUseTotal: res.data.data.couldUseTotal,
            cumulativeDisTotal: res.data.data.cumulativeDisTotal,
            cumulativeUseTotal: res.data.data.cumulativeUseTotal
          }
        } else {
          vm.summaryData = null
        }
        vm.BindTable = res.data.data.data ? res.data.data.data : []
      }).catch(res => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .deductTaxTable{
    padding: 30px;

    .ibox {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
      .ibox-info {
        .ibox-title {
          font-size: 18px;
        }
        .ibox-desc {
          margin-top: 10px;
          font-size: 24px;
          font-weight: bold;
        }
      }
      .ibox-icon {
        font-size: 24px;
      }
    }

    .key-search {
      margin-top: 30px;
      padding: 20px 30px;
      padding-bottom: 0px;
      margin-bottom: 30px;
      border: 1px solid #eeeeee;
      .cus-input {
        max-width: 400px;
      }
    }

    .key-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .ele-table,
    .pagination {
      margin-bottom: 30px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

  }
</style>
